import { lazy, Suspense, useEffect, useState } from 'react'
import { Navigate, useNavigate, useLocation } from 'react-router-dom'
import { userInfoStore } from '@/store/store'

const Login = lazy(() => import('@/pages/Login'))
const Home = lazy(() => import('@/pages/Home'))
const User = lazy(() => import('@/pages/User'))
const RecycleBin = lazy(() => import('@/pages/RecycleBin'))

// 正在加载组件
function Loading() {
  return <h2 style={{ minHeight: '100vh' }}>Loading....</h2>
}

// 404组件
function NotFound() {
  const navigate = useNavigate()
  const location = useLocation()

  useEffect(() => {
    let mySpan1 = document.getElementById('spanEl1')
    mySpan1.addEventListener('mouseenter', () => {
      mySpan1.style.color = '#6d45ff'
    })
    mySpan1.addEventListener('mouseleave', () => {
      mySpan1.style.color = '#6a6a6a'
    })

    let mySpan2 = document.getElementById('spanEl2')
    mySpan2.addEventListener('mouseenter', () => {
      mySpan2.style.color = '#6d45ff'
    })
    mySpan2.addEventListener('mouseleave', () => {
      mySpan2.style.color = '#6a6a6a'
    })
  }, [])

  const [currentPath, setCurrentPath] = useState<string>('')

  useEffect(() => {
    navigate(location.pathname)
    setCurrentPath(location.pathname)
  }, [])

  const refreshRoute = () => navigate(currentPath, { state: { reenter: true } })

  const sty = {
    margin: '20px',
    fontSize: '18px',
    cursor: 'pointer',
    fontWeight: 'bold',
    color: '#6a6a6a',
  }

  return (
    <>
      <h2>404....，暂无该页面，或者暂无权限</h2>
      <span id="spanEl1" style={sty} onClick={() => navigate('/login')}>
        返回登录页面
      </span>

      <span id="spanEl2" style={sty} onClick={refreshRoute}>
        重新进入此页面
      </span>
    </>
  )
}

// 基本无权限路由
const routes = [
  {
    path: '/',
    element: <Navigate to="/login" />,
  },
  {
    path: '/login',
    element: (
      <Suspense fallback={<Loading />}>
        <Login />
      </Suspense>
    ),
  },
  {
    path: '*',
    element: (
      <Suspense fallback={<Loading />}>
        <NotFound />
      </Suspense>
    ),
  },
]

// 权限路由
const rightRoutes = [
  {
    path: '/home',
    element: (
      <Suspense fallback={<Loading />}>
        <Home />
      </Suspense>
    ),
  },
  {
    path: '/user',
    element: (
      <Suspense fallback={<Loading />}>
        <User />
      </Suspense>
    ),
  },
  {
    path: '/recycle',
    element: (
      <Suspense fallback={<Loading />}>
        <RecycleBin />
      </Suspense>
    ),
  },
]

let routesTable = routes

userInfoStore.onLoginStatusChange((newStatus) => {
  if (newStatus) routesTable = [...routes, ...rightRoutes]
  else routesTable = [...routes]
})

// 创建可以操作路由表的方法
const createRoute = (func: Function) => {
  if (!userInfoStore.loginStatus && window.localStorage.getItem('token'))
    userInfoStore.getUserInfo()

  if (userInfoStore.loginStatus) routesTable = [...routes, ...rightRoutes]

  return func(routesTable)
}

// 默认导入一个可以操作路由表的方法，而不是直接导入路由表
export default createRoute
